import React, {RefObject} from "react";
import {Button as AntdButton, Tabs as AntdTabs} from 'antd';
import {renderItems, render, VJsonComponent, VJsonComponentBase} from "../factory";
import _ from 'lodash';
import {YvanEvent} from "../types";
import {TabsType, TabsPosition, TabPaneProps, TabsProps} from "antd/lib/tabs";
import {apply, YvanEventBind, YvanEventDispatch} from "..";
import {SizeType} from "antd/lib/config-provider/SizeContext";
import * as Extend from "../extend";
import {FormInstance} from "antd/lib/form/hooks/useForm";
import {toJS} from "mobx";


export interface ListimgVJsonProp {
    items: any[]
    viewId: any
}

interface ListimgState {

}

@VJsonComponent({
    view: 'listimg'
})
export default class Listimg extends VJsonComponentBase<ListimgVJsonProp, ListimgState> {
    static defaultProps = {
        items: [],
        getChecked: []
    }

    defaultActiveKey?: string
    private _activeKey?: string

    constructor(props: any) {
        super(props);

        _.defaults(
            props.vjson,
            Listimg.defaultProps
        )
    }

    deleteChecked() {//批量删除
        let _checkbox = $('ul[view_id=' + this.key + '] label')
        for (let i = 0; i < _checkbox.length; i++) {
            if ($(_checkbox[i]).hasClass('ant-checkbox-wrapper-checked')) {
                $(_checkbox[i]).closest('li').remove()
            }
        }
    }

    onSeeClick = (e: any, index: any) => {//查看
        YvanEventDispatch(this.props.vjson.seeClick, this, index);
    }
    onAddClick = (e: any) => {//新增
        YvanEventDispatch(this.props.vjson.addClick, this, e);
    }
    onCloseClick = (e: any) => {//关闭
        if (this.props.vjson.closeClick) {
            YvanEventDispatch(this.props.vjson.closeClick, this, $(e.currentTarget).closest('li'));
        } else {
            $(e.currentTarget).closest('li').remove();
        }
    }
    onCheckClick = (e: any) => {//勾选框
        if ($(e.currentTarget).hasClass('ant-checkbox-wrapper-checked')) {//已经选中
            $(e.currentTarget).removeClass('ant-checkbox-wrapper-checked');
            $(e.currentTarget).find('.ant-checkbox').removeClass('ant-checkbox-checked');
            $(e.currentTarget).find('input').val('');
        } else {//未选中
            $(e.currentTarget).addClass('ant-checkbox-wrapper-checked');
            $(e.currentTarget).find('.ant-checkbox').addClass('ant-checkbox-checked');
            $(e.currentTarget).find('input').val(1);
        }
    }

    render() {
        return (
            // @ts-ignore
            <div>
                <ul className="listimg-ui"
                    // @ts-ignore
                    view_id={this.key}>
                    {
                        (!this.props.vjson.addClick) ? null : <li>
                            <div className="listimg-add-box" onClick={this.onAddClick}>
                                <span className="fa fa-plus"></span>
                            </div>
                        </li>
                    }
                    {
                        _.map(this.props.vjson.items, (item: any, index: any) => {
                            return (
                                <li key={index}>
                                    <div className="listimg-operation">
                                        <label htmlFor="" className="ant-checkbox-wrapper" onClick={(e) => {
                                            this.onCheckClick(e)
                                        }}>
                                            <span className="ant-checkbox">
                                                <input type="checkbox" className="ant-checkbox-input"/>
                                                <span className="ant-checkbox-inner"></span>
                                            </span>
                                        </label>
                                        <span className="fa fa-times" onClick={(e) => {
                                            this.onCloseClick(e)
                                        }}></span>
                                    </div>
                                    <div className="listimg-url" onClick={(e) => {
                                        this.onSeeClick(e, index)
                                    }}>
                                        <img src={item.img} alt=""/>
                                    </div>
                                    <div className="listimg-dec">
                                        <p>文件名：{item.name}</p>
                                        <p>分类：{item.classify}</p>
                                        <p>状态：{item.state}</p>
                                        <span></span>
                                    </div>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}